<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>煤棚</title>
		<link rel="stylesheet" href="assets/layui/css/layui.css">
		<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
		<link rel="stylesheet" href="assets/css/common.css">
		<link rel="stylesheet" href="assets/css/steelmaking.css">
	</head>
	<body>
		<div class="main-page">
			<div class="page-body flex">
				<div class="sub-page-container">
					<div class="right-content-wrapper page-coal-shed">
						<div class="right-content-box">
							<ul class="tags">
								<li class="to-back" onclick="javascript:history.back()">返回</li>
								<li>有组织</li>
								<li>&gt;</li>
								<li>炼钢生产区</li>
							</ul>
							<div class="content-section">
								<div class="left-section">
									<div class="card1">
									<p class="shebei-txt">炼钢生产区</p>
									<div class="txt">炼钢厂的生产规模是该厂年产原钢的数量，即合格钢锭或二者之和的年产量。但对于某一个炼钢厂来说，还应区分它的“生产能力”和“实际(或计划)产量”。</div>
									<div class="info flex">
										<img src="assets/img/yu.png"><span>区域面积：<span class="un mgl-4 mgr-20">650m²</span></span>
										<img src="assets/img/person.png"><span>工作人员：<span class="un mgl-4 mgr-20">120人</span></span>
									</div>
									<div class="img-part">
										<p class="img-txt">设备信息</p>
										<div class="img-body flex">
											<img class="img-p" src="assets/img/detector.png">
											<img class="img-p" src="assets/img/vocs.png">
											<img class="img-p" src="assets/img/jiankong.png">
											<img class="img-p" src="assets/img/zhili.png">
										</div>
									</div>
									<ul class="footer-ul-data flex">
										<span class="label">检测仪</span>
										<span class="label">vocs设备</span>
										<span class="label">监控设备</span>
										<span class="label">治理设备</span>
									</ul>
									<div class="foot-body">
										<ul class="footer-ul-data flex">
											<li class="footer-li"><span class="inline">62</span><span>/68</span></li>
											<li class="footer-li"><span class="inline">14</span><span>/4</span></li>
											<li class="footer-li"><span class="inline">62</span><span>/68</span></li>
											<li class="footer-li"><span class="inline">82</span><span>/83</span></li>
										</ul>
									</div>
									</div>
									<div class="card2">
									  <p class="shebei-txt">监控设备数据</p>
										<div class="card-content">
											<table class="table">
												<thead>
													<tr>
														<th>设备</th>
														<th>时间</th>
														<th>颗粒物浓度</th>
														<th>PM10</th>
														<th>PM2.5</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#检测仪</td>
														<td>10:18:12</td>
														<td>0.052</td>
														<td>0.097</td>
														<td>0.026</td>
													</tr>
												</tbody>
											</table>
										</div> 
									</div>
									<div class="card3">
										<p class="shebei-txt">运行状态</p>
										<div class="card-content">
											<table class="table">
												<thead>
													<tr>
														<th>治理设备</th>
														<th>启停状态</th>
														<th>急停</th>
														<th>检测设备</th>
														<th>颗粒物</th>
													</tr>
												</thead>
												<tbody class="tbody">
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
													<tr>
														<td>3#喷雾机</td>
														<td>系统待机</td>
														<td>0.052</td>
														<td>3#检测仪</td>
														<td>0.026</td>
													</tr>
												</tbody>
											</table>
										</div>	
									</div>
								</div>
								<div class="center-section">
									<div class="video-box flex">3D模型</div>
									<div class="center-section-footer"></div>
								</div>
								<div class="right-section">
									<div class="card4">
										<p class="shebei-txt">实时视频</p>
										<div class="content-body">
											<div class="swiper-box" id="swiper">
												<ul>
													<li>
														<section class="mini-item">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4 mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
													</li>
													<li>
														<section class="mini-item">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4 mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
													</li>
													<li>
														<section class="mini-item">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
														<section class="mini-item mgl-4 mgt-4">
															<div class="video-box flex">
																实时视频
																<span class="name">东大门</span>
															</div>
														</section>
													</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="card5">
										<p class="shebei-txt">粉尘治理效果</p>
										<div class="content-body">
											<div class="top-chart">
												<div class="top-echatrs aqi" id="device1"></div>
												<div class="select-box flex">
													<span>设备</span>
													<span id="select1"></span>
												</div>
												<div class="flex result">
													<span>耗电量 0.365<span class="unit mgl-4 mgr-20"> kw/h</span></span>
													<span>耗水量 0.365<span class="unit mgl-4 mgr-20"> m³</span></span>
												</div>
											</div>
											<div class="bottom-chart">
												<div class="top-echatrs aqi" id="device2"></div>
												<div class="select-box flex">
													<span>设备</span>
													<span id="select2"></span>
												</div>
												<div class="flex result">
													<span>耗电量 0.365<span class="unit mgl-4 mgr-20"> kw/h</span></span>
													<span>耗水量 0.365<span class="unit mgl-4 mgr-20"> m³</span></span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- 下拉框区域 begin -->
							<div class="select-box"></div>
							<!-- 下拉框区域 end -->
						</div>
						<span class="close-btn"></span>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
		<script src="assets/js/page.js"></script>
		<script src="assets/js/echarts.min.js"></script>
		<script src="assets/js/swiper.js"></script>
		<script src="assets/js/select.js"></script>
		<script>
			var pageObj = function(){
				this.init()
			}
			
			pageObj.prototype.init = function() {
				// 渲染底部菜单
				new Footer({
				    el:".main-page",
				    curMenu:"有组织",
				    size:4,
				    menus:[
				        {href:"有组织.html",text:"有组织"},
				        {href:"无组织.html",text:"无组织"},
				        {href:"车辆出入.html",text:"清洁运输"},
				        {href:"视频.html",text:"视频大厅"}
				    ]
				});
				
				// 渲染左侧菜单树
				new LeftSiderMenu({
				    el:".sub-page-container",
				    size:10,
				    curMenu:"炼钢生产区",
				    menus:[
				        {href:"炼钢生产区.html",text:"炼钢生产区"},
				        {href:"球团生产区.html",text:"球团生产区"},
				        {href:"轧钢生产区.html",text:"轧钢生产区"},
				        {href:"带钢生产区.html",text:"带钢生产区"},
				    ]
				});
				
				this.initChart1();
				this.initChart2();
				
				
				new SelectPlus({
					el:"#select1",
					data:[
						{ value:"",text:"请选择" },
						{ value:1,text:"1#检测仪" },
						{ value:2,text:"2#检测仪" },
						{ value:3,text:"3#检测仪" }
					],
					done:function(row){
						console.log(row);
					}
				})
				
				
				new SelectPlus({
					el:"#select2",
					data:[
						{ value:"",text:"请选择" },
						{ value:1,text:"1#检测仪" },
						{ value:2,text:"2#检测仪" },
						{ value:3,text:"3#检测仪" }
					],
					done:function(row){
						console.log(row);
					}
				})

				new Swiper({
					el:"#swiper",
					pageChange:function(idx){	//分页切换事件
						console.log(idx)
					},
					clickItem:function(idx){	//li的点击事件
						console.log(idx);
					}
				})

			}
			pageObj.prototype.initChart2 = function() {
				//实例化对象
				var myChart = echarts.init(document.getElementById("device1"));
				//吧配置给实例对象 
				myChart.setOption({
					color:['#0081FF','#FF4D4D','#06E1FF'],
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend: {
				        data: ['治理前','治理中','治理后'],
				        textStyle:{
				        	//修改图例文字颜色
				        	color:"#ffffff"
				        },
				        right:"2%",
						icon: "circle",
				    },
				    grid: {
				    	top:'36%',
				        left: '3%',
				        right: '5%',
				        bottom: '3%',
				        borderColor:'#012f4a',//边框颜色
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
						show:true,
				        data: ['00', '03', '06', '09', '12', '15', '18', '21', '24'],
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        }
				    },
				    yAxis: {
				        type: 'value',
						show:true,
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        },
				        splitLine:{
						 //坐标轴在 grid 区域中的分隔线。	
							show:true,
							lineStyle:{
								color:"rgba(30, 57, 135, 0.57)"
							}
				        }
				    },
				    series: [
						{
						    name: '治理前',
						    type: 'line',
						    stack: '总量',
						    smooth:false,
						    symbolSize:0,
						    data: [0.2,0.1,0.3,0.4,0.5,0.6,0.6,0.8],
							areaStyle: {
							    normal: {
							        color: new echarts.graphic.LinearGradient(0,0,0,1,
							            [
							            	{
							                    offset: 0,
							                    color: "rgba(0, 129, 255, 0.71)"
							                },
							                {
							                    offset: 1,
							                    color: "rgba(0, 129, 255, 0.1)"
							                }
							            ],
							            false
							        )
							    }
							}
						}
				    ]
				});
			}
			pageObj.prototype.initChart1 = function() {
				//实例化对象
				var myChart = echarts.init(document.getElementById("device2"));
				//吧配置给实例对象 
				myChart.setOption({
					color:['#0081FF','#FF4D4D','#06E1FF'],
	  				tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            lineStyle: {
				                color: {
				                    type: 'linear',
				                    x: 0,
				                    y: 0,
				                    x2: 0,
				                    y2: 1,
				                    colorStops: [{
				                        offset: 0,
				                        color: 'rgba(0, 255, 233,0)'
				                    }, {
				                        offset: 0.5,
				                        color: 'rgba(255, 255, 255,1)',
				                    }, {
				                        offset: 1,
				                        color: 'rgba(0, 255, 233,0)'
				                    }],
				                    global: false
				                }
				            },
				        },
				    },
				    legend: {
				        data: ['治理前','治理中','治理后'],
				        textStyle:{
				        	//修改图例文字颜色
				        	color:"#ffffff"
				        },
				        right:"2%",
						icon: "circle",
				    },
				    grid: {
				    	top:'36%',
				        left: '3%',
				        right: '5%',
				        bottom: '3%',
				        borderColor:'#012f4a',//边框颜色
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
						show:true,
				        data: ['00', '03', '06', '09', '12', '15', '18', '21', '24'],
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        }
				    },
				    yAxis: {
				        type: 'value',
						show:true,
				        axisTick:{
				        	//去掉刻度线
				        	show:false
				        },
				        axisLabel:{
				        	color:'#4c9bfd'
				        },
				        axisLine:{
				        	//去除轴线
				        	show:false
				        },
				        splitLine:{
						 //坐标轴在 grid 区域中的分隔线。	
							show:true,
							lineStyle:{
								color:"rgba(30, 57, 135, 0.57)"
							}
				        }
				    },
				    series: [
						{
						    name: '治理前',
						    type: 'line',
						    stack: '总量',
						    smooth:false,
						    symbolSize:0,
						    data: [0.2,0.1,0.3,0.4,0.5,0.6,0.6,0.8],
							areaStyle: {
							    normal: {
							        color: new echarts.graphic.LinearGradient(0,0,0,1,
							            [
							            	{
							                    offset: 0,
							                    color: "rgba(0, 129, 255, 0.71)"
							                },
							                {
							                    offset: 1,
							                    color: "rgba(0, 129, 255, 0.1)"
							                }
							            ],
							            false
							        )
							    }
							}
						}
				    ]
				});
			}
		
			
			new pageObj();
		</script>
	</body>
</html>
